<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
			<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
			<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
			<el-tab-pane label="sql练习增加" name="fourth">
				<div>
					<el-form ref="form" :model="formdate" :rules="rules" label-width="80px">
						<el-form-item label="业务场景:" prop="sqlDemand">
							<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formdate.sqlDemand">
							</el-input>
						</el-form-item>
						<el-form-item label="解释:" prop="sqlAnalysis">
							<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formdate.sqlAnalysis">
							</el-input>
						</el-form-item>
						<el-form-item label="SQL语句:" prop="sqlSentence">
							<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formdate.sqlSentence">
							</el-input>
						</el-form-item>
						<el-form-item label="表名:" prop="sqlTable">
							<el-input placeholder="请输入内容" v-model="formdate.sqlTable" clearable>
							</el-input>
						</el-form-item>
						<el-button type="primary" style="position: relative;left: 50%;" @click="submit">确定</el-button>
					</el-form>
				</div>
			</el-tab-pane>
		</el-tabs>

	</div>
</template>

<script>
	import {
		post
	} from '../../plugin/http.js';
	import {
		ElMessage
	} from 'element-plus'
	export default {
		name: 'administrator',
		components: {},
		data: () => ({
			formdate: {},
			rules: {
				sqlDemand: [{
					required: true,
					message: '请输入业务场景',
					trigger: 'blur'
				}],
				sqlAnalysis: [{
					required: true,
					message: '请输入解析',
					trigger: 'blur'
				}],
				sqlSentence: [{
					required: true,
					message: '请输入SQl语句',
					trigger: 'blur'
				}],
				sqlTable: [{
					required: true,
					message: '请输入表名',
					trigger: 'blur'
				}],
			},
			activeName: 'fourth'
		}),
		methods: {
			submit() {
				post("/addSqlPractice", this.formdate).then(res => {
					if (res.data.code == 200) {
						debugger
						ElMessage({
							showClose: true,
							message: res.data.msg,
							type: 'success'
						});
					} else {
						ElMessage({
							showClose: true,
							message: res.data.msg,
							type: 'error'
						});
					}
				});
			},

		}
	}
</script>

<style scoped="scoped">
</style>
